/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, Table, TableBody, TableRow, Cell, Button, Collapse, useTheme, CCell,
} from "customize-easy-ui-component";
import { DirectLink } from "../../../routing/Link";
import {ReportViewProps, ReportViewSubProps,} from "../../common/base";
import {分项末尾链接,} from "../../common/rarelyVary";
import {useMainRepUrlOr, useSplitSubCapacity, useSplitSubRepList} from "../../hook/useMainRepUrlOr";
import {useContext} from "react";
import RoutingContext from "../../../routing/RoutingContext";
import {useThreeColumnSubr} from "../../hook/useThreeColumnSubr";
import {config测量仪,} from "./Detection.O-1";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";

export const ReportView: React.FunctionComponent<ReportViewProps> = (
    {repId,   source: parentOrc,  verId,rep, redId,fxIdx ,...other}
) => {
    const {urlMainRep}=useMainRepUrlOr(rep);
    const lsBlockMax=useSplitSubCapacity(parentOrc?._ENDOSCOPIC_EX?.length,1);       //【模板敲定一次性最大几个分项显示出来】有些分项报告模板可能存在很多个分项 最多1个
    const {sumArea, areaIdAs, btnBindUses}=useSplitSubRepList(parentOrc?._ENDOSCOPIC_EX ?? [], lsBlockMax,false);
    const { get:getRouteUrl } = useContext(RoutingContext);
    const routeLevels=getRouteUrl().entries.length;
    const routeTemplate=getRouteUrl().entries[routeLevels-1]?.routeData?.params?.template;
    return (
        <React.Fragment>
          <div  id="rp_endoscopic_ex_"  css={{"@media not print": {marginTop:'1rem', marginBottom: '1rem'},}}>
             <DirectLink  href={`/report/ENDOSCOPIC_EX/ver/${verId}/${repId}/ENDOSCOPIC_EX/_Controller`}>
                <div css={{"@media print":{display: 'none'} }}>
                    <Button>{(repId===rep?.id && rep?.modeltype!=='ENDOSCOPIC_EX')? '内嵌式的':'独立流转的'}内窥镜检查报告分项控制器</Button>
                </div>
             </DirectLink>
            {(new Array(sumArea).fill(null)).map((s:any,ak:number) => {
                const [isDisplay, bindBtn]=btnBindUses[ak];
                return <React.Fragment key={ak}>
                    <div key={ak} role="button" {...bindBtn}  css={{"@media print":{display: 'none'}}}>
                        { <Text variant="h4">{`内窥镜检查折叠区${ak+1}，`}{isDisplay ? `收起`:`更多..`}</Text> }
                    </div>
                    <Collapse id={`${ak}`} show={isDisplay} noAnimated>
                        { areaIdAs[ak]?.map((surpId: any, m:number) => {
                            const dispIdx=(fxIdx??0) +(m+ ak*lsBlockMax);
                            return <OneSubRepView key={m} fxIdx={fxIdx} dispIdx={dispIdx} rep={rep} repId={repId}
                                                  verId={verId} parentOrc={parentOrc} surpId={surpId}/>
                        }) }
                        <div role="button" {...bindBtn}  css={{"@media print":{display: 'none'}}}>
                            <Text variant="h4">{`内窥镜检查折叠区${ak+1}结束,收起`}</Text>
                        </div>
                    </Collapse>
                </React.Fragment>
            })}
          </div>
          {分项末尾链接({template:'ENDOSCOPIC_EX', repId: repId||'',verId,urlMainRep,
                nestIn:'ENDOSCOPIC_EX'!==routeTemplate, flowNest: repId!==rep?.id}) }
       </React.Fragment>
    );
}

const OneSubRepView: React.FunctionComponent<ReportViewSubProps> = (
    {fxIdx,dispIdx,rep,repId,verId,parentOrc,surpId}
) => {
    const theme= useTheme();
    const orc=parentOrc['_ENDOSCOPIC_EX_'+surpId];
    const [firstNode,_S]=useThreeColumnSubr({orc, config:config测量仪,parentOrc,slash:true,
                       href:`/report/ENDOSCOPIC_EX/ver/${verId}/${repId}/${surpId}/Instrument`});
    return <React.Fragment>
        <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}}}>
            <Text variant="h2" css={{textAlign: 'center', marginTop: '1rem',
            }}>内窥镜检查报告{dispIdx ? '-' + dispIdx : ''}</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text></Text>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={ ["14.1%","28%","11%","21%","8.1%","%"] }
               css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}} tight miniw={800}>
            <TableBody>
                <DirectLink href={`/report/ENDOSCOPIC_EX/ver/${verId}/${repId}/${surpId}/Instrument`}>
                    {firstNode}
                </DirectLink>
                <DirectLink href={`/report/ENDOSCOPIC_EX/ver/${verId}/${repId}/${surpId}/ResultDiagram`}>
                    <TableRow>
                        <CCell>检查部位示意图</CCell>
                        <Cell colSpan={5}>
                            <div css={{whiteSpace: 'pre-wrap'}}>{orc?.示图说明 || '／'}</div>
                        </Cell>
                    </TableRow>
                    <TableRow><Cell colSpan={6} split={true} css={{"@media print": {height: undefined}, padding: 0}}>
                        <div css={{display: 'flex',justifyContent: 'space-around',alignItems: 'center',}}>
                            { !orc?._FILE_部位?.url && '／' }
                            { orc?._FILE_部位?.url &&
                                <img src={process.env.REACT_APP_OSS_ENDP+orc?._FILE_部位?.url} alt={orc?._FILE_部位?.url}
                                     css={{
                                         maxHeight: '14cm',
                                         maxWidth: '-webkit-fill-available',
                                         "@media print": {maxHeight: '26cm', maxWidth: '705px'},
                                         [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined}
                                     }}
                                />
                            }
                        </div>
                    </Cell></TableRow>
                    <TableRow>
                        <Cell colSpan={6}>检验结果：</Cell>
                    </TableRow>
                    <TableRow>
                        <Cell split={true} colSpan={6}><div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>
                            {orc?.检测结果 || '／'}
                        </div></Cell>
                    </TableRow>
                </DirectLink>
            </TableBody>
        </Table>
        <TailMenRowIspCheck orc={orc} rep={rep} href={`/report/ENDOSCOPIC_EX/ver/${verId}/${repId}/${surpId}/ResultDiagram`}>
        </TailMenRowIspCheck>
    </React.Fragment>;
}
